<!--
 * @Description: 
 * @Author: zhihong deng
 * @Date: 2021-05-30 21:23:23
 * @LastEditors: gino deng
 * @LastEditTime: 2024-07-28 18:59:27
-->
<template>
  <div class="com-container" @dblclick="revertMap">
    <div class="com-chart" ref="map_ref"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import axios from 'axios';
import {getProvinceMapInfo} from '@/utils/map_utils'
export default {
    data () {
        return {
            chartInstance: '',
            allData: '',
            mapData: {},//所获取的省份的地图矢量数据
        }
    },
    computed: {
      ...mapState(['theme'])
    },
    watch: {
      theme () {
        // 第一步：销毁当前图表
        this.chartInstance.dispose()
        // 第二步：重新以最新的主题初始化图表对象
        this.initChart()
        // 第三步：完成屏幕的适配
        this.screenAdapter()
        // 第四步：更新图表的展示
        this.updateChart()
      }
    },
    methods: {
        // 初始化图表
        async initChart () {
            this.chartInstance = this.$echarts.init(this.$refs.map_ref,this.theme);
            const ret = await axios.get(`${process.env.VUE_APP_API_URL}${process.env.VUE_APP_STATIC_PATH}/static/map/china.json`);
            console.log('地图矢量数据',ret);
            this.$echarts.registerMap('china',ret.data);
            const initOption = {
                title: {
                    text: '▍商家分布',
                    left: 20,
                    top: 20
                },
                legend: {
                    left: '5%',
                    bottom: '5%',
                    orient: 'vertical',//标签文字方向
                },
                // geo 地图专用属性
                geo: {
                    type: 'map',
                    map: 'china',
                    top: '5%',
                    bottom: '5%',
                    itemStyle: {
                        areaColor: '#2E72BF',
                        borderColor: '#333'
                    }
                }
            };
            this.chartInstance.setOption(initOption);
            this.chartInstance.on('click',async arg => {
                const provinceInfo = getProvinceMapInfo(arg.name);
                console.log('点击了地图的：',provinceInfo);
                if(!this.mapData[provinceInfo.key]){
                  const ret = await axios.get (process.env.VUE_APP_API_URL + provinceInfo.path);
                  this.mapData[provinceInfo.key] = ret.data;
                  this.$echarts.registerMap(provinceInfo.key,ret.data);
                }
                const changeOption = {
                  geo: {
                    map: provinceInfo.key
                  }
                }
                this.chartInstance.setOption(changeOption);
            });
        },
        // 获取数据
        getData (ret) {
            // const {data: ret} = await this.$http.get('map');
            this.allData = ret;
            console.log('map数据',this.allData);
            this.updateChart();
        },
        // 更新图表
        updateChart () {
            const legendArr = this.allData.map(item => {
                return item.name;
            });
            const seriesArr = this.allData.map(item => {
                return{
                    type: 'effectScatter',
                    // 控制涟漪效果
                    rippleEffect: {
                        scale: 5,
                        brushType: 'stroke',//空心的涟漪效果
                    },
                    name: item.name,
                    data: item.children,
                    coordinateSystem: 'geo',//在地图中显示散点的数据
                }
            });
            const dataOption = {
                legend: {
                    data: legendArr,
                },
                series: seriesArr
            };
            this.chartInstance.setOption(dataOption);
        },
        // 分辨率适配
        screenAdapter () {
            const titleFonstSize = this.$refs.map_ref.offsetWidth / 100 * 3.6;
            const adapterOption = {
                title: {
                    textStyle: {
                        fontSize: titleFonstSize
                    }
                },
                legend: {
                    itemWidth: titleFonstSize / 2,
                    itemHeight: titleFonstSize / 2,
                    itemGap: titleFonstSize / 2,//文字与图标间隔
                    textStyle: {
                        fontSize: titleFonstSize / 2
                    }
                }
            };
            this.chartInstance.setOption(adapterOption);
            this.chartInstance.resize();
        },
        revertMap () {
          const revertOption = {
            geo: {
              map: 'china',
            }
          }
          this.chartInstance.setOption(revertOption);
        },
    },
    created () {
      // 在组件创建完成之后回调函数的注册
      this.$socket.registerCallBack('mapData',this.getData)
    },
    mounted () {
        this.initChart();
        // this.getData();
        this.$socket.send({
          action: 'getData',
          socketType: 'mapData',
          chartName: 'map',
          value: ''
        })
        window.addEventListener('resize',this.screenAdapter);
        this.screenAdapter();
    },
    destroyed () {
        window.removeEventListener('resize',this.screenAdapter)
        this.$socket.unRegisterCallBack('mapData')
    },
}
</script>

<style>

</style>